<!--  -->
<template>
<div id='BusinessInformation'>
    <div class="hint">
        <hint></hint>
    </div>
    <div class="center">
            <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="商户编码">
    <el-input v-model="form.bm"  class="aa"></el-input>
  </el-form-item>
    <el-form-item label="商户名称">
    <el-input v-model="form.name" class="aa"></el-input>
  </el-form-item>
  <el-form-item label="商户地址">
    <el-input v-model="form.dz" class="aa"></el-input>
  </el-form-item>

  <el-form-item label="详细地址">
    <el-input type="textarea" v-model="form.desc" class="aa"></el-input>
  </el-form-item>
    <el-form-item label="联系人">
    <el-input v-model="form.call" class="aa"></el-input>
  </el-form-item>
  <el-form-item label="手机号">
    <el-input v-model="form.phone" class="aa"></el-input>
  </el-form-item>
<el-upload class="bb"
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">保存设置</el-button>
  </el-form-item>
</el-form>

    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import hint from"./header"
export default {
    props:{
    },
//import引入的组件需要注入到对象中才能使用
components: {
    'hint':hint
},
data() {
//这里存放数据
return {
    
     dialogImageUrl: '',
        dialogVisible: false,
  form: {
          name: '',
          bm: '',
          dz: '',
          call: '',
          delivery: false,
          type: [],
          phone: '',
          desc: ''
        }
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
 onSubmit() {
   console.log(this.form.name);
       alert('submit')
       }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped>
    .center{
        width: 1100px;
        height: 634px;
        margin: 20px auto;
    }
    .aa{
        width: 500px;
    }
    .bb{
        margin-left: 100px;
        padding-bottom: 20px;
    }
</style>